<template>
  <div class="bg">
    <svg class="bg-icon"
         aria-hidden="true">
      <use xlink:href="#icon500"></use>
    </svg>
    <div class="bg-right">
      <p>500</p>
      <span>{{$t('common.500')}}</span>
      <el-button size="small"
                 type="primary"
                 @click="$router.push({
        path: '/'
      })">{{$t('common.toHome')}}</el-button>
    </div>
  </div>
</template>

<script>
import { loadJs } from '../../util/util.js'
import { iconfontSymbol } from '../../config/env.js'

export default {
  mounted () {
    loadJs(iconfontSymbol)
  }
}
</script>

<style lang="scss" scoped>
.bg {
  background: #f2f2f2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  &-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 500px;
    margin-right: 100px;
  }
  &-right {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    p {
      color: #606266;
      font-size: 90px;
      margin: 0 0 20px 0;
    }
    span {
      font-size: 20px;
      margin-bottom: 20px;
      color: #909399;
    }
  }
}
</style>